<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-文本效果</title>
    <link rel="stylesheet" href="public.css">
    <style>
        .text-shadow1 {
            text-shadow: 2px 2px red;
        }

        .text-shadow2 {
            text-shadow: 2px 2px 2px red;
        }


        #boxshadow {
            position: relative;
            /* -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); */
            /* -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); */
            /* box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); */
            padding: 10px;
            background: white;
        }

        #boxshadow::after {
            content: '';
            position: absolute;
            z-index: 1;
            /* hide shadow behind image */
            -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
            box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
            width: 100%;
            left: 0;
            /* one half of the remaining 30% */
            height: 1rem;
            bottom: 0;
        }

        .yichu {
            display: block;
            white-space: nowrap;
            /* 不换行 */
            width: 200px;
            background-color: skyblue;
            overflow: hidden;
        }

        .overflow1 {
            text-overflow: clip;
        }

        .overflow2 {
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div>
        <h3>1、文字阴影</h3>
        <p>指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色</p>
        <p class="text-shadow1">如果我是DJ，你还爱我吗？</p>
        <p class="text-shadow2">如果我是DJ，你还爱我吗？</p>
        <div id="boxshadow">如果我是DJ，你还爱我吗？</div>

        <h3>2、Text Overflow属性</h3>
        <p>文本溢出属性指定应向用户如何显示溢出内容</p>
        <p class="overflow1 yichu">文本溢出属性指定应向用户如何显示溢出内容</p>
        <p class="overflow2 yichu">文本溢出属性指定应向用户如何显示溢出内容</p>

        <h3>3、换行</h3>
        <p>如果某个单词太长，不适合在一个区域内，它扩展到外面：CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字：</p>

        <div class="start-center">
            <div class="box">Loremipsumdolorsit ametconsectetur adipisicingelit.</div>
            <!-- 允许长文本换行 -->
            <div class="box" style="word-wrap: break-word;">Loremipsumdolorsit ametconsectetur adipisicingelit.</div>
        </div>
        <h3>4、其他</h3>
        <a href="https://www.runoob.com/css3/css3-text-effects.html">详情点击链接</a>
        <p>hanging-punctuation 规定标点字符是否位于线框之外。 3</p>
        <p>punctuation-trim 规定是否对标点字符进行修剪。 3</p>
        <p>text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3</p>
        <p>text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3</p>
        <p>text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 3</p>
        <p>text-outline 规定文本的轮廓。 3</p>
        <p>text-overflow 规定当文本溢出包含元素时发生的事情。 3</p>
        <p>text-shadow 向文本添加阴影。 3</p>
        <p>text-wrap 规定文本的换行规则。 3</p>
        <p>word-break 规定非中日韩文本的换行规则。 3</p>
        <p>word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 3</p>
    </div>
</body>

</html>